<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/js/jquery/jquery.min.js}" charset="utf-8"></script>

    <!--[if lt IE 9]>
    <script th:src="@{/js/IE9/html5.min.js}"></script>
    <script th:src="@{/js/IE9/respond.min.js}"></script>
    <![endif]-->
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        body {
            background: #1E9FFF;
        }

        body:after {
            content: '';
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-filter: blur(3px);
            -moz-filter: blur(3px);
            -o-filter: blur(3px);
            -ms-filter: blur(3px);
            filter: blur(3px);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }

        .layui-container {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .admin-login-background {
            width: 33%;
            height: 300px;
            position: absolute;
            left: 45%;
            top: 30%;
            margin-left: -180px;
            margin-top: -100px;
        }

        .logo-title {
            text-align: center;
            letter-spacing: 2px;
            padding: 14px 0;
        }

        .logo-title h1 {
            color: #1E9FFF;
            font-size: 25px;
            font-weight: bold;
        }

        .login-form {
            background-color: #fff;
            border: 1px solid #fff;
            border-radius: 3px;
            padding: 14px 20px;
            box-shadow: 0 0 8px #eeeeee;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" method="post">
                <div class="layui-form-item logo-title">
                    <h1>用户注册</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input id="username" type="text" oninput="checkUserName()" name="username"
                               lay-verify="required"
                               placeholder="用户名"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="layui-anim layui-anim-up" style="font-size: small;color: red"
                              hidden>该用户名已被使用</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nickname" lay-verify="required" placeholder="请输入昵称"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input id="pwd" type="password" oninput="checkPwd()" name="password"
                               lay-verify="required|password" placeholder="密码"
                               autocomplete="off" class="layui-input">
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-inline">
                        <input id="rePwd" oninput="checkPwd()" type="password" name="testPassword"
                               lay-verify="required|password"
                               placeholder="请再次输入密码"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="layui-anim layui-anim-up" style="font-size: small;color: red"
                              hidden>您输入的密码不匹配</span>
                    </div>
                </div>
                <div class="layui-form-item" hidden>
                    <input id="avatarId" type="text" name="avatar"
                           autocomplete="off">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input id="email" autocomplete="off" class="layui-input" lay-verify="email" name="email"
                               placeholder="请输入邮箱"
                               type="email">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <button id="sendVerifyCodeBtn" lay-submit lay-filter="sendVerifyCode"
                                class="layui-btn layui-btn-sm layui-btn-normal">
                            发送验证码
                        </button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input id="verifyCode" type="text" name="verifyCode"
                               placeholder="验证码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限</label>
                    <div class="layui-input-inline">
                        <select name="role">
                            <option value="root" disabled>超级管理员</option>
                            <option value="admin" disabled>管理员</option>
                            <option value="user" selected>普通用户</option>
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">更高权限请联系管理员</div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
                            lay-filter="register">注 册
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/js/jq-module/jquery.particleground.min.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    let basePath = [[${#httpServletRequest.getContextPath()}]];
    $(function () {
        let HandlerInterceptor = [[${Interceptor_msg}]];
        let register_msg = [[${session.register_msg}]];
        if (register_msg != "" && null != register_msg) {
            layui.layer.msg(register_msg);
        }
        if (HandlerInterceptor != "" && null != HandlerInterceptor) {
            layui.layer.msg(HandlerInterceptor);
        }
    });
    layui.use(['form'], function () {
        let form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        // 粒子线条背景
        $(document).ready(function () {
            $('.layui-container').particleground({
                dotColor: '#7ec7fd',
                lineColor: '#7ec7fd'
            });
        });
        form.on('submit(sendVerifyCode)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.password != data.testPassword) {
                layer.msg('两次输入的密码不一致', {icon: 2});
                return false;
            }
            let sendVerifyCodeBtn = $('#sendVerifyCodeBtn');
            let layerSentEmail;
            $.ajax({
                type: 'POST',
                url: basePath + '/email/sendVerifyCode',
                data: {'receiver': data.email},
                dataType: 'json',
                async: true,
                beforeSend: function () {
                    sendVerifyCodeBtn.addClass("layui-btn-disabled");
                    layerSentEmail = layer.msg('正在发送', {icon: 16, shade: 0.01, time: 0});
                },
                success: function (result) {
                    let index = 90;
                    sendVerifyCodeBtn.text((index--) + "S后再次获取");
                    let timer = setInterval(function () {
                        sendVerifyCodeBtn.text((index--) + "S后再次获取");
                        if (index < 0) {
                            sendVerifyCodeBtn.removeClass("layui-btn-disabled");
                            sendVerifyCodeBtn.text("发送");
                            clearInterval(timer);
                            index = 90;
                        }
                    }, 1000);
                    if (result.code == 1) {
                        layer.close(layerSentEmail);
                        layer.msg(result.msg, {icon: 1});
                    } else {
                        layer.msg('请求失败!\n提示信息：' + result.msg, {icon: 5});
                    }
                }
                , error: function (par) {
                    layer.close(layerSentEmail);
                    layer.msg(par)
                }
            });
            return false;
        })
        // 进行注册操作
        form.on('submit(register)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.password != data.testPassword) {
                layer.msg('两次输入的密码不一致', {icon: 2});
                return false;
            }
            if (data.verifyCode == '' || null == data.verifyCode) {
                layer.msg('验证码不能为空');
                return false;
            }
            let registerLayer;
            registerLayer = layui.layer.msg('正在注册...', {icon: 16, shade: 0.01, time: 0});
            $.ajax({
                type: "POST",
                url: basePath + '/user/getDefaultIcon',
                async: false,
                success: function (result) {
                    layui.layer.close(registerLayer);
                    console.log(result);
                    let jsonData = JSON.parse(result);
                    if (jsonData.code == 1) {
                        data.avatar = jsonData.data[0];
                        //成功
                        $.ajax({
                            type: "POST",
                            url: basePath + '/user/register',
                            async: false,
                            data: JSON.stringify(data),
                            dataType: 'json',
                            contentType: 'application/json',
                            success: function (result) {
                                layui.layer.close(registerLayer);
                                if (result.code == 1) {
                                    //成功
                                    layui.layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                        window.location = basePath + '/login.html?username=' + data.username;
                                    });
                                } else {
                                    //失败
                                    layui.layer.msg(result.msg, {icon: 2});
                                }
                            },
                            error: function (arg) {
                                layui.layer.close(registerLayer);
                                layui.layer.msg(arg);
                            }
                        });
                    } else {
                        //失败
                        layui.layer.msg(jsonData.msg, {icon: 2});
                    }
                },
                error: function (arg) {
                    layui.layer.close(registerLayer);
                    layui.layer.msg(arg);
                }
            });
            return false;
        });
        window.checkUserName = function () {
            let username = $('#username');
            $.ajax({
                type: "get",
                url: basePath + '/user/queryByUsername',
                data: {'username': username.val()},
                dataType: 'json',
                success: function (result) {
                    if (result.code == 1) {
                        //成功
                        if (result.data[0] == true) {
                            username.parent().next().children("span").show();
                        } else {
                            username.parent().next().children("span").hide();
                        }
                    } else {
                        //失败
                        console.log(result.msg);
                    }
                },
                error: function (arg) {
                    layui.layer.msg(arg);
                }
            });
        }
        window.checkPwd = function () {
            let pwd = $('#pwd');
            let rePwd = $('#rePwd');
            if ((pwd.val() != rePwd.val() && rePwd.val() != "") && pwd.val() != "") {
                rePwd.parent().next().children("span").show();
            } else {
                rePwd.parent().next().children("span").hide();
            }
        }
    });
</script>
</body>
</html>